<template>  
  <li>  
    <input type="checkbox" :checked="completed" @change="toggleCompletion" />  
    <span :class="{ completed: completed }">{{ title }}</span>  
    <button @click="removeTodo">删除</button>  
  </li>  
</template>  
  
<script>  
export default {  
  name: 'TodoItem',  
  props: {  
    title: {  
      type: String,  
      required: true,  
    },  
    completed: {  
      type: Boolean,  
      default: false,  
    },  
  },  
  methods: {  
    toggleCompletion() {  
      this.$emit('update:completed', !this.completed);  
    },  
    removeTodo() {  
      this.$emit('remove-todo');  
    },  
  },  
};  
</script>  
  
<style scoped>  
.completed {  
  text-decoration: line-through;  
}  
</style>